import Vue from 'vue'
import Vuex from 'vuex'
// import { setToken, getToken } from '@/utils/local'
// 持久化
// 1：值修改了存储到浏览器
// 2：初始值读取浏览器存储
// vuex数据持久化插件vuex-persistedstate
//  1:npm i vuex-persistedstate
//  2:导入  import persistedstate from 'vuex-persistedstate'
//  3:配制使用插件  plugins:[persistedstate({paths:['哪个数据要持久化']})]
import persistedstate from 'vuex-persistedstate'
import { userProfile } from '@/api/mine'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    tokenObj: {},
    userInfo: {},
    num: 1
  },
  mutations: {
    // 修改state唯一途径，它只能用于同步代码
    setTokenObj (state, value) {
      state.tokenObj = value
    },
    logout (state) {
      // 删除token
      state.tokenObj = {}
      // 删除用户信息
      state.userInfo = {}
    },
    // 修改userInfo
    setUserInfo (state, value) {
      state.userInfo = value
    },
    setNum (state, value) {
      state.num = value
    }
  },
  actions: {
    // 用于异步代码处理，也可以做同步处理，但是它如果要修改state,还得通过mutations
    test (ctx, value) {
      // ctx:{commit方法,state:state数据}
      setTimeout(() => {
        ctx.commit('setNum', value)
      }, 2000)
    },
    // this.$store.dispatch('test',value实参值)
    // 封装获取用户信息的方法
    async getUserInfo (ctx) {
      // ctx:{state,commit}
      if (!ctx.state.userInfo.id) {
        const res = await userProfile()
        ctx.commit('setUserInfo', res.data)
        console.log('用户信息', res)
      }
    }
  },
  getters: {},
  modules: {},
  plugins: [
    persistedstate({
      paths: ['tokenObj']
    })
  ]
})
